<template>
  <div v-if="weatherData" v-drag class="weather-container">
    <div class="weather-container-header">
      <h4><b>{{ weatherData.city }}</b> <b>今日 {{ daysWeather[0].date }}</b> <b>{{ daysWeather[0].week }}</b></h4>
      <!-- <span>{{ daysWeather[0].rainfall.msg }}</span> -->
      <span class="iconfont icon-cuohao" @click="hideWeather" />
    </div>
    <div class="weather-container-content">
      <dl>
        <dt><span>温度：</span>{{ daysWeather[0].tem_night }}℃~{{ daysWeather[0].tem_day }}℃</dt>
        <dd class="first-child"><img :src="daysWeather[0].pic" alt=""></dd>
        <dd><span>天气：</span>{{ daysWeather[0].wea }}</dd>
        <dd><span>风向：</span>{{ daysWeather[0].win }}</dd>
        <dd><span>风速：</span>{{ daysWeather[0].win_speed }}</dd>
      </dl>
      <dl v-for="(item,index) in daysWeather.slice(1)" :key="index">
        <dt>{{ item.week }}<br>{{ item.date }}</dt>
        <dd>{{ item.tem_night }}℃~{{ item.tem_day }}℃</dd>
        <dd class="flex"><img :src="item.pic" alt="">{{ item.wea }}</dd>
        <dd>{{ item.win }}</dd>
        <dd>{{ item.win_speed }}</dd>
        <dd />
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  // 自定义指令
  directives: {
    drag: {
      // 指令的定义
      bind: function(el) {
        const oDiv = el // 获取当前元素
        oDiv.onmousedown = (e) => {
          console.log('onmousedown')
          // 算出鼠标相对元素的位置
          const disX = e.clientX - oDiv.offsetLeft
          const disY = e.clientY - oDiv.offsetTop

          document.onmousemove = (e) => {
            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            const left = e.clientX - disX
            const top = e.clientY - disY

            oDiv.style.left = left + 'px'
            oDiv.style.top = top + 'px'
          }

          document.onmouseup = (e) => {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    }
  },
  props: {
    weatherData: {
      type: [Object, null],
      default() {
        return null
      }
    }
  },
  data() {
    return {
      rainfallVisible: false,
      isShowDrag: false,
      chartSettings: {
        legendName: {
          '降雨量': '降雨量（mm）'
        }
      },
      chartExtend: {
        tooltip: {
          formatter(params) {
            for (const x in params) {
              return params[x].name + '：' + params[x].value[1] + ' mm'
            }
          }
        }
      }
    }
  },
  computed: {
    daysWeather() {
      return this.weatherData && this.weatherData.data
    },
    rainfallTitle() {
      return this.rainfallVisible ? '隐藏' : '显示'
    },
    rainfallIcon() {
      return this.rainfallVisible ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
    },
    rainfallChartData() {
      const rainfall = this.weatherData && this.weatherData.data && this.weatherData.data[0].rainfall.data
      const rows = rainfall.map(val => {
        return {
          '时间': val.time.substr(11, 5),
          '降雨量': +val.value * 10
        }
      })
      return {
        columns: ['时间', '降雨量'],
        rows
      }
    }
  },
  methods: {
    hideWeather() {
      this.$emit('showWeather')
    },
    showRainfall() {
      this.rainfallVisible = !this.rainfallVisible
    },
    hideRainfall() {
      this.rainfallVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.rainfall-container{
  padding:12px;
  background:rgba(255,255,255,1);
}
.weather-container {
  position: fixed;
  width:900px;
  top: 62px;
  right: 104px;
  background: rgba(0, 0, 0, 0.8);
  color:#fff;
  border-radius: 4px;
  z-index:999;
  padding:12px;
  cursor:move;
  &-header {
    display:flex;
    align-items:center;
    height: 72px;
    line-height: 72px;
    color: #fff;
    font-size: 14px;
    text-indent: 12px;
    position: relative;
    margin:24px 0 16px 0;
    h4 {
      font-size: 20px;
      height: 72px;
      line-height: 72px;
      color:#fff;
      b{
        margin-right:12px;
        font-weight:normal;
      }
    }
    span.icon-cuohao {
      position: absolute;
      top: -36px;
      right: 4px;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
    }
  }
  &-content {
    height: 248px;
    dl {
      float: left;
      height: 236px;
      padding: 0 12px;
      dt {
        text-align: center;
        color: #fff;
        margin: 12px 0 30px 0;
        // font-weight: 700;
        font-size:14px;
        line-height:24px;
      }
      &:first-child {
        width: 208px;
        padding: 12px 0;
        dt {
          font-size: 20px;
          margin: 12px 0 24px 0;
          color: #fff;
          text-indent: 24px;
          text-align: left;
        }
        dd{
          text-indent:24px;
          &.first-child{
            text-indent:48px;
            img{
              width:32px;
              height:32px;
            }
          }
        }
      }
      dd {
        font-size: 12px;
        color: #fafafa;
        line-height: 32px;
        &.flex{
          align-items:center;
          img{
            width:24px;
            height:24px;
            margin-right:4px
          }
        }
      }
    }
  }
}
</style>
